<!--<template>-->
<!--  <div style="width:80%;height:100%;position: absolute">-->
<!--    <div id="mapView"></div>-->
<!--    <div></div>-->
<!--  </div>-->

<!--</template>-->

<!--<script>-->
<!--import esriLoader from 'esri-loader'-->
<!--import { getOfficeInfoByCompanyCode } from '@/api/eventlist'-->

<!--export default {-->
<!--  name: 'index',-->
<!--  data () {-->
<!--    return {-->
<!--      gridFid: '87', // 社区FID-->
<!--      communityName: '', // 社区名称-->
<!--      searchInfo: {} // 搜索项-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    _createSceneView: function () {-->
<!--      let option = {-->
<!--        url: 'http://map.qstb.top/arcgis_js_api/library/4.16/dojo/dojo.js',-->
<!--        css: 'http://map.qstb.top/arcgis_js_api/library/4.16/esri/themes/light/main.css'-->
<!--      }-->
<!--      esriLoader.loadModules(['esri/layers/MapImageLayer', 'esri/Map', 'esri/views/MapView', 'esri/Basemap', 'esri/PopupTemplate', 'esri/tasks/support/Query', 'esri/layers/FeatureLayer', 'esri/layers/GraphicsLayer', 'esri/symbols/SimpleMarkerSymbol', 'esri/renderers/SimpleRenderer', 'esri/symbols/SimpleLineSymbol', 'dojo/_base/Color', 'dojo/on',-->
<!--        'dojo/dom', 'esri/layers/TileLayer', 'esri/widgets/Search', 'esri/geometry/Point', 'dojo/ready', 'dojo/dom-style', 'dojo/mouse', 'dojo/domReady!'], option).then(([MapImageLayer, Map, MapView, Basemap, PopupTemplate, Query, FeatureLayer, GraphicsLayer, SimpleMarkerSymbol, SimpleRenderer, SimpleLineSymbol, Color, on, dom, TileLayer, Search, Point, ready, domStyle, mouse]) => {-->
<!--        let syBaseMap = new Basemap({-->
<!--          baseLayers: [-->
<!--            new TileLayer({-->
<!--              url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/syemap/MapServer',-->
<!--              title: 'Basemap'-->
<!--            })-->
<!--          ],-->
<!--          title: 'basemap',-->
<!--          id: 'basemap'-->
<!--          // zoom: 40-->
<!--        })-->
<!--        let map = new Map({-->
<!--          basemap: syBaseMap,-->
<!--          center: [-46.807, 32.553]-->
<!--        })-->
<!--        let view = new MapView({-->
<!--          container: 'mapView',-->
<!--          map: map,-->
<!--          resizeEnable: true,-->
<!--          autoResize: true,-->
<!--          center: [41514920.799, 4662871.182],-->
<!--          zoom: 2,-->
<!--          highlightOptions: {-->
<!--            color: 'orange'-->
<!--          }-->
<!--        })-->
<!--        let layer = new FeatureLayer({ // 社区名称-->
<!--          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/1',-->
<!--          definitionExpression: 'FID = ' + this.gridFid + '',-->
<!--          outFields: ['*']-->
<!--        })-->
<!--        map.add(layer, 2)-->
<!--        let layer1 = new FeatureLayer({ // 网格-->
<!--          id: 'aaa',-->
<!--          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/2',-->
<!--          definitionExpression: 'FID in (308, 309, 310)',-->
<!--          outFields: ['*']-->
<!--        })-->
<!--        map.add(layer1, 3)-->
<!--        let layer2 = new FeatureLayer({ // 街道-->
<!--          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/3',-->
<!--          // definitionExpression: 'FID = ' + this.gridFid + '',-->
<!--          outFields: ['*']-->
<!--        })-->
<!--        map.add(layer2, 1)-->
<!--        let layer3 = new FeatureLayer({ // 区-->
<!--          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/4',-->
<!--          // definitionExpression: 'FID = ' + this.gridFid + '',-->
<!--          outFields: ['*']-->
<!--        })-->
<!--        map.add(layer3, 0)-->
<!--        let layer4 = new FeatureLayer({ // 建筑点-->
<!--          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/0',-->
<!--          // definitionExpression: 'FID = ' + this.gridFid + '',-->
<!--          outFields: ['*']-->
<!--        })-->
<!--        // map.add(layer4, 5)-->
<!--        let layer5 = new FeatureLayer({ // 建筑-->
<!--          id: 'ccc',-->
<!--          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/5',-->
<!--          // definitionExpression: 'FID = ' + this.gridFid + '',-->
<!--          outFields: ['*']-->
<!--        })-->
<!--        // map.add(layer5, 4)-->
<!--        view.on('click', (evt) => { // 单击-->
<!--          view.hitTest(evt).then(function (response) {-->
<!--            if (response.results.length) {-->
<!--              var graphic = response.results.filter(function (result) {-->
<!--                return result.graphic.layer === layer-->
<!--              })[0].graphic-->
<!--              // layer.popupTemplate = template-->
<!--              var graphic1 = response.results.filter(function (result) {-->
<!--                return result.graphic.layer === layer1-->
<!--              })[0].graphic-->
<!--              // var graphic2 = response.results.filter(function (result) {-->
<!--              //   return result.graphic.layer === layer2-->
<!--              // })[0].graphic-->
<!--              // // var graphic5 = response.results.filter(function (result) { // 建筑点-->
<!--              //   return result.graphic.layer === layer4-->
<!--              // })[0].graphic-->
<!--              // console.log('街道信息', graphic2.attributes)-->
<!--              console.log('社区信息', graphic.attributes)-->
<!--              console.log('网格信息', graphic1.attributes)-->
<!--              // console.log('建筑点信息', graphic5.attributes)-->
<!--            }-->
<!--          })-->
<!--        })-->
<!--      })-->
<!--    },-->
<!--    findGridInfo () {-->
<!--      getOfficeInfoByCompanyCode().then(ret => {-->
<!--        if (ret.data.errcode === 0) {-->
<!--          this.gridFid = ret.data.data.csc_map_fid-->
<!--          console.log(ret.data.data, '社区信息')-->
<!--          this._createSceneView()-->
<!--        }-->
<!--      })-->
<!--    }-->
<!--  },-->
<!--  mounted () {-->
<!--    // this.findGridInfo()-->
<!--    this._createSceneView()-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--  #mapView{-->
<!--    position: absolute;-->
<!--    width: 100%;-->
<!--    height: 65%;-->
<!--    /* width: 1024px;-->
<!--    height: 768px; */-->
<!--  }-->
<!--  .search-div {-->
<!--    width: 250px;-->
<!--    margin-left: 55px;-->
<!--    margin-top: 16px;-->
<!--  }-->
<!--  #info {-->
<!--    background-color: black;-->
<!--    opacity: 0.75;-->
<!--    color: orange;-->
<!--    font-size: 18pt;-->
<!--    padding: 8px;-->
<!--    visibility: hidden;-->
<!--  }-->
<!--</style>-->
